<template>
  <div class="main-content">
    <company v-if="`${routerId}` === '1'" />
    <talent v-if="`${routerId}` === '2'" />
    <aboutUs v-if="`${routerId}` === '3'" />
    <productsModel
      v-if="['11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'].includes(`${routerId}`)" />
    <casesModel v-if="`${routerId}` === '23'" />
    <newsModel v-if="`${routerId}` === '24'" />
    <talent v-if="`${routerId}` === '25'" />
    <aboutUs v-if="`${routerId}` === '26'" />
  </div>
</template>

<script>
import talent from './model/talent.vue'
import company from './model/company.vue'
import aboutUs from './model/aboutUs.vue'
import productsModel from './model/productsModel.vue'
import casesModel from './model/casesModel.vue'
import newsModel from './model/newsModel.vue'
export default {
  name: 'navRight',
  components: {
    talent,
    company,
    aboutUs,
    productsModel,
    casesModel,
    newsModel
  },
  data() {
    return {
      routerId: ''
    }
  },
  watch: {
    '$route.params.id': {
      handler(newVal) {
        this.routerId = newVal
      },
      immediate: true
    }
  },
  mounted() {
    this.getRouterId()
    console.log(this.routerId)
  },
  methods: {
    getRouterId() {
      this.routerId = this.$route.params.id
    }
  }
}
</script>

<style scoped>
.main-content {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 36px 44px 36px 44px;
  margin-left: 28px;
  min-width: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    padding: 20px 15px;
    border-radius: 6px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding: 15px 10px;
  }
}
</style>